<!--  -->
<template>
  <div class="container">
    <div class="user-main">
      <div class="back-box">
        <div class="btn-back" @click="goBack">
          <img src="@/assets/img/back.png" alt="" />
          <span>返回</span>
        </div>
        <div class="line"></div>
        <div class="name">学员详情</div>
      </div>

      <div class="user-info-box">
        <div class="user-base-info-box">
          <div class="user-avatar">
            <img :src="userInfo.avatar" alt="" />
          </div>
          <div class="user-nickname">{{ userInfo.nick_name }}</div>
          <div class="buttons">
            <button
              class="el-button real-profile el-button--primary"
              @click="goProfile"
            >
              实名信息
            </button>
            <el-link type="primary" @click="goEdit">修改资料</el-link>
            <el-link type="primary" @click="goCredit">修改积分</el-link>
            <el-link type="primary" @click="goTags">修改标签</el-link>
            <el-link type="primary" @click="goCreate">修改备注</el-link>
          </div>
        </div>
        <div class="panel-info-box">
          <div class="panel-info-item">ID：{{ userInfo.id }}</div>
          <div class="panel-info-item">手机号：{{ userInfo.mobile }}</div>
          <div class="panel-info-item">积分：{{ userInfo.credit1 }}</div>
          <div class="panel-info-item">VIP：{{ role.name }}</div>
          <div class="panel-info-item">
            VIP过期时间：{{ userInfo.role_expired_at }}
          </div>
          <div class="panel-info-item">一级邀请人：</div>
          <div class="panel-info-item">学员邀请码：未使用</div>
          <div class="panel-info-item">推广余额：0</div>
          <div class="panel-info-item">锁定登录：{{ is_lock }}</div>
          <div class="panel-info-item">IP地址：{{ userInfo.register_ip }}</div>
          <div class="panel-info-item">
            注册区域：{{ userInfo.register_area }}
          </div>
          <div class="panel-info-item">
            标签：<span v-for="item in tags" :key="item.id">{{ item.name }}</span>
          </div>
          <div class="panel-info-item">备注：</div>
        </div>
      </div>

      <div class="footer-nav-box">
        <div class="nav-header">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="录播" name="first">录播</el-tab-pane>
            <el-tab-pane label="时评" name="second">时评</el-tab-pane>
            <el-tab-pane label="录播观看" name="third">录播观看</el-tab-pane>
            <el-tab-pane label="视频观看" name="fourth">视频观看</el-tab-pane>
            <el-tab-pane label="订单" name="fifth">订单</el-tab-pane>
            <el-tab-pane label="积分明细" name="sixth">积分明细</el-tab-pane>
            <el-tab-pane label="VIP记录" name="seventh">VIP记录</el-tab-pane>
            <el-tab-pane label="邀请记录" name="eighth">邀请记录</el-tab-pane>
          </el-tabs>
        </div>

        <div class="pagination-box">
          <el-pagination background layout="prev, pager, next,total" :total="0">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getDetailInfo } from "@/network/member";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      detailParams: { id: "" },
      activeName: "first",
      userInfo: {},
      role: {},
      tags: [],
      is_lock: "",
      id: "",
      remark: "",
      credit1: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    async created1() {
      const arr = location.href.split("/");
      this.detailParams.id = arr[arr.length - 1];
      let res = await getDetailInfo(this.detailParams);
      // console.log(res.data.data);
      if (res.status === 0) {
        this.userInfo = res.data.data;
        // console.log(this.userInfo.role.name);
        if (this.userInfo.role != null) {
          this.role = this.userInfo.role;
          //   console.log(role_expired_at);
        }
        if (this.userInfo.tags.length != 0) {
          this.tags = this.userInfo.tags;
          // console.log(this.userInfo.tags);
        }
        if (this.userInfo.is_lock === -1) {
          this.is_lock = "否";
        } else {
          this.is_lock = "是";
        }
        if (this.userInfo.remark != null) {
          this.remark = this.userInfo.remark;
        }
        if (this.userInfo.credit1 != null) {
          this.credit1 = this.userInfo.credit1;
        }
      }
      // console.log(res);
    },
    goBack: function () {
      this.$router.go(-1);
    },
    handleClick() {
      //   console.log(tab, event);
    },
    goProfile() {
      this.$router.push({
        path: "/member/profile",
      });
    },
    goCreate: function () {
      this.$router.push({
        path: "/member/create",
      });
    },
    goEdit: function () {
      const len = location.href.split("/").length - 1;
      this.id = location.href.split("/")[len];
      // console.log(id);
      this.$router.push({
        path: `/member/${this.id}/edit`,
      });
    },
    goCredit: function () {
      const len = location.href.split("/").length - 1;
      this.id = location.href.split("/")[len];
      // console.log(id);
      this.$router.push({
        path: `/member/${this.id}/credit`,
      });
    },
    goTags: function () {
      const len = location.href.split("/").length - 1;
      this.id = location.href.split("/")[len];
      // console.log(id);
      this.$router.push({
        path: `/member/${this.id}/tags`,
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.created1();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.container {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 5px 20px 20px;
  overflow-y: auto;
  background-color: #f1f2f9;
  .user-main {
    padding: 30px;
    border-radius: 15px;
    background-color: #ffffff;
    .back-box {
      width: 100%;
      height: auto;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      .btn-back {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;
        display: flex;
        align-items: center;

        img {
          width: 14px;
          height: 14px;
          margin-right: 4px;
        }
      }
      .btn-back:hover {
        color: #409eff;
      }
      .line {
        width: 1px;
        height: 14px;
        background-color: #d8d8d8;
        margin-right: 15px;
        margin-left: 15px;
      }

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }
    .user-info-box {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      margin-top: 10px;
      flex-direction: column;
      .user-base-info-box {
        width: 100%;

        box-sizing: border-box;
        padding-bottom: 20px;
        border-bottom: 1px solid #f3f6f9;
        display: flex;
        flex-direction: row;
        align-items: center;

        .user-avatar {
          width: 80px;
          height: 80px;
          margin-right: 20px;
          img {
            width: 80px;
            height: 80px;
          }
        }

        .user-nickname {
          height: 80px;
          font-size: 20px;
          font-weight: 600;
          color: #333;
          line-height: 80px;
        }
        .buttons {
          button {
            margin: 0 30px;
          }
          a {
            margin-right: 20px;
          }
        }
      }

      .panel-info-box {
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 20px;
        padding-top: 30px;
        display: grid;
        row-gap: 30px;
        -moz-column-gap: 0;
        column-gap: 0;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        .panel-info-item {
          display: flex;
          width: auto;
          height: auto;
          font-size: 14px;
          font-weight: 400;
          color: #333;
          line-height: 14px;
          align-items: center;
          span {
            display: inline-block;
            padding: 0 10px;
            background-color: #ecf5ff;
            border-color: #d9ecff;
            color: #409eff;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
          }
        }
      }
    }
    .footer-nav-box {
      border-radius: 15px;
      margin-top: 15px;
      background-color: #fff;
      .nav-header {
        ::v-deep .el-tab-pane {
          margin-top: 30px;
          height: 48px;
          background-color: #f1f2f9;
          line-height: 48px;
          padding-left: 15px;
          color: #333;
          font-weight: bold;
        }
      }
      .pagination-box {
        margin-top: 15px;
      }
    }
  }
}
</style>